<script setup>
import {ref,reactive} from 'vue'
import {useMemberCardStore} from '@/store/memberCard'
import {useCourseStore} from '@/store/course'
import { storeToRefs } from 'pinia'
import {ElMessageBox} from 'element-plus'

// 相关数据
const courseStore = useCourseStore()
const {courses} = storeToRefs(courseStore)
const memberCardStore = useMemberCardStore()
const {memberCards} = storeToRefs(memberCardStore)

// 添加和编辑课程
const curView = ref('course')

const courseForm = reactive({
    id: 0,
    courseName: "",
    duration: 0,
    capacity: 0,
    consumeTimes: 0,
    supportMemberCards:[],
    description: "",
    genderConstraint: "无",
    ageConstraint: 0,
    reservationConstraint: 0
})

const showAddCourse = () => {
    curView.value = 'addCourse'
    clearCourseForm()
}

const clearCourseForm = () => {
    courseForm.id = 0
    courseForm.courseName = ""
    courseForm.duration = 0
    courseForm.capacity = 0
    courseForm.consumeTimes = 0
    courseForm.supportMemberCards = []
    courseForm.description = ""
    courseForm.genderConstraint = "无"
    courseForm.ageConstraint = 0
    courseForm.reservationConstraint = 0
}

const showEditCourse = (id) => {
    curView.value = 'editCourse'
    const course = courseStore.getCourseById(id)
    courseForm.id = course.id
    courseForm.courseName = course.courseName
    courseForm.duration = course.duration
    courseForm.capacity = course.capacity
    courseForm.consumeTimes = course.consumeTimes
    courseForm.supportMemberCards = course.supportMemberCards
    courseForm.description = course.description
    courseForm.genderConstraint = course.genderConstraint
    courseForm.ageConstraint = course.ageConstraint
    courseForm.reservationConstraint = course.reservationConstraint
}

const addOrEditCourse = () => {
    if(curView.value === 'addCourse'){
        addCourse()
    }
    else if (curView.value === 'editCourse'){
        editCourse(courseForm.id)
    }
}

const addCourse = () => {
    courseStore.addCourse(courseForm)
    clearCourseForm()
    curView.value ='course'
}

const editCourse = () => {
    courseStore.editCourse(courseForm)
    curView.value ='course'
}

// 删除课程
const deleteCourseId = ref(0)

const showDeleteCourseMessage = (id) =>{
    deleteCourseId.value = id;
    ElMessageBox.confirm('确认删除此课程嘛，删除后不能恢复！', '删除确认', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
        callback: action => {
            if (action === 'confirm') {
                deleteCourse();
                ElMessageBox.alert('课程信息已删除', {
                    type: 'success'
                });
            }
        }
    })
}

const deleteCourse = () => {
    courseStore.deleteCourse(deleteCourseId.value)
}

// 分页
const pageData = reactive({
    pageCurrent:1,
    pageSize:10,
})

const handleCurrentChange = (val) => {
    pageData.pageCurrent = val;
}

// 必填信息
const rules = {
    courseName: [{ required: true, message: '此字段为必填', trigger: 'blur' }],
}

</script>

<template>
    <!-- 课程页面 -->
    <div class="course" v-if="curView ==='course'">
        <div class="handle-box">
            <el-button type="primary" @click="showAddCourse">添加课程</el-button>
        </div>
        <el-divider></el-divider>
        <el-table :data="courses.slice((pageData.pageCurrent-1)*pageData.pageSize,pageData.pageCurrent*pageData.pageSize)" style="width: 100%;" stripe border>
            <el-table-column prop="courseName" label="课程名" sortable />
            <el-table-column prop="duration" label="时长(分钟)" sortable />
            <el-table-column prop="capacity" label="上课容纳人数" sortable />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="showEditCourse(scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="small" @click="showDeleteCourseMessage(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-row>
            <el-col :span="20">
                <el-pagination  v-model:current-page="pageData.pageCurrent"
                :page-size="pageData.pageSize"
                layout="prev, pager, next"   
                :total="courses.length"
                prev-text="上一页"
                next-text="下一页"
                @current-change="handleCurrentChange" />
            </el-col>
            <el-col :span="4" style="font-size: 14px;">
                <span>当前 {{(pageData.pageCurrent-1)*pageData.pageSize+1}} 条到 {{Math.min(pageData.pageSize*pageData.pageCurrent,courses.length) }} 条，共 {{courses.length}} 条</span> 
            </el-col>
        </el-row>
    </div>

    <!-- 添加和编辑课程页面 -->
    <div class="edit-course" v-else-if="curView === 'editCourse' || curView === 'addCourse'">
        <el-form :model="courseForm" label-position="right" label-width="100px" style="margin-left: 50px" :rules="rules">
            <el-form-item label="课程名称" prop="courseName">
                <el-input v-model="courseForm.courseName" placeholder="课程名称" style="width:600px"></el-input>
            </el-form-item>
            <el-form-item label="时长(分钟)" prop="duration">
                <el-input-number v-model="courseForm.duration" placeholder="时长(分钟)"/>
            </el-form-item>
            <el-form-item label="上课容纳人数" prop="capacity">
                <el-input-number v-model="courseForm.capacity" placeholder="上课容纳人数" />
            </el-form-item>
            <el-form-item label="消费次数" prop="consumeTimes">
                <el-input-number v-model="courseForm.consumeTimes" placeholder="消费次数" />
            </el-form-item>
            <el-form-item label="支持会员卡" prop="supportMemberCards">
                <el-select v-model="courseForm.supportMemberCards" placeholder="支持会员卡" style="width:600px" multiple>
                    <el-option v-for="item in memberCards" :key="item.id" :label="item.memberCardName" :value="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item label="课程描述" prop="description">
                <el-input type="textarea" v-model="courseForm.description" placeholder="课程描述" style="width:600px"></el-input>
            </el-form-item>
            <h2>高级功能(对预约会员的条件限制)</h2>
            <el-divider/>
            <el-form-item label="性别限制" prop="genderConstraint">
                <el-select v-model="courseForm.genderConstraint" style="width:600px" placeholder="性别限制">
                    <el-option label="无" value="无"></el-option>
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="年龄限制" prop="ageConstraint">
                <el-input-number v-model="courseForm.ageConstraint" placeholder="年龄限制" />
            </el-form-item>
            <el-form-item label="预约限制" prop="reservationConstraint">
                <el-input-number v-model="courseForm.reservationConstraint" placeholder="预约限制" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addOrEditCourse">保存</el-button>
                <el-button type="info" @click="curView = 'course'">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>

</style>
